@import '~@/uni_modules/lime-style/index.scss';
$prefix: l !default;
$pagination: #{$prefix}-pagination;

$pagination-font-size: create-var(pagination-font-size, $font-size-md);
$pagination-item-width: create-var(pagination-item-width, 40px);
$pagination-item-height: create-var(pagination-item-height, 40px);
$pagination-text-color: create-var(pagination-text-color, $text-color-2);
$pagination-bg-color: create-var(pagination-bg-color, $gray-1);
$pagination-active-bg-color: create-var(pagination-active-bg-color, $primary-color);
$pagination-active-text-color: create-var(pagination-active-text-color, white);
$pagination-border-radius: create-var(pagination-border-radius, 5px);
$pagination-disabled-opacity: create-var(pagination-disabled-opacity, 0.5);
$pagination-disabled-color: create-var(pagination-disabled-color, $text-color-4);
$pagination-disabled-bg-color: create-var(pagination-disabled-bg-color, $bg-color-page);
// $pagination-disabled-active-bg-color: create-var(pagination-disabled-active-bg-color, $gray-3);
$pagination-simple-color: create-var(pagination-simple-color, $text-color-2);
$pagination-gap: create-var(pagination-gap, 3px);
$pagination-border-color: create-var(pagination-border-color, transparent);

  
  
.#{$pagination} {
	flex-direction: row;
	// justify-content: center;
	align-items: center;
	/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
	margin-left: -$pagination-gap;
	margin-right: -$pagination-gap;
	/* #endif */
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
	display: flex;
	margin-left: calc($pagination-gap * -1);
	margin-right: calc($pagination-gap * -1);
	/* #endif */
	&__simple {
		font-size: $pagination-font-size;
		color: $pagination-simple-color;
		flex-grow: 1.5;
		text-align: center;
	}
	&__item {
		margin: 0 $pagination-gap;
		// flex: 1;
		font-size: $pagination-font-size;
		// min-width: $pagination-item-width;
		height: $pagination-item-height;
		color: $pagination-text-color;
		background: $pagination-bg-color;
		// text-align: center;
		// align-items: center;
		// justify-content: center;
		border-radius: $pagination-border-radius;
		/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
		border-color: $pagination-border-color;
		/* #endif */
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		cursor: pointer;
		user-select: none;
		&:after {
			border-radius: calc($pagination-border-radius * 2);
			border-color: $pagination-border-color;
		}
		/* #endif */
		&--page {
			flex-grow: 0;
			padding: 0;
			width: $pagination-item-width;
		}
		&--active {
			background-color: $pagination-active-bg-color;
			color: $pagination-active-text-color;
		}
		&--disabled {
			background-color: $pagination-disabled-bg-color;
			color: $pagination-disabled-color;
		}
	}
	&__next,&__prev{
		 min-width: $pagination-item-width;
	}
	&--disabled {
		opacity: $pagination-disabled-opacity;
	}
}